Adding a new Project

The Translations Editor is configured to easily integrate with any other ABAIR project that uses i18next within React. This page outlines the process for adding a new project to the Translations Editor application, including how to add a new tab in the navigation sidebar and set up the required components.

Step 1: Create a New Page Component

First, create a new page component in the src/pages directory:

1. Create a new file named NewProject.jsx in the src/pages directory
2. Implement the component using the TranslationEditorLayout as follows:

import TranslationEditorLayout from "../components/TranslationEditor/TranslationEditorLayout";

export default function NewProject() {
  return (
    <TranslationEditorLayout
      heading={"New Project"}
      description={
        "This is the translations editor for the New Project website."
      }
      project={"new-project"}
      repository={"new-project"}
      filepath={"./src/locales/resources.json"}
    />
  );
}

Key Parameters:

• heading: The title displayed at the top of the page
• description: A brief description of the project
• project: The project identifier (used in database operations)
• repository: The GitHub repository name
• filepath: The path to the translations file within the repository

Step 2: Add the Route to App.jsx

Update the main App.jsx file to include a route for the new project:

1. Import the new component at the top of the file:

import NewProject from "./pages/NewProject";

2. Add a new route within the existing Routes component:

<Route path="new-project" element={<NewProject />} />

Step 3: Add a Navigation Link to the Sidebar

Update the DSidebar.jsx component to include a link to the new project:

1. Add a new SidebarLink component within the aside_list in the DSidebar component:

<SidebarLink to="/new-project">New Project</SidebarLink>

This will appear alongside the other project links in the sidebar navigation.

Step 4: Testing

In the database:

• The project identifier (specified as project={"new-project"} in the component) will identify the projects translations within the translations column in the supabase database.
• The translations will be fetched using this identifier when the page loads

After implementing these changes:

1. Start the application
2. Verify that the "New Project" tab appears in the sidebar
3. Click on the tab to navigate to the new project page
4. Confirm that translations are loading correctly (if data is available)
5. Test the filtering, search, and editing features with your new project

Component Structure

The new project page utilizes the following component hierarchy:

1. NewProject (your new page component)
   • TranslationEditorLayout (handles the main layout and data fetching)
     • TranslationEditorHeader (contains actions like save, export)
     • TranslationEditorFilters (provides filtering options)
     • Multiple TranslationNamespace components (displays grouped translations)

URL Structure

The URL for your new project will be:

/new-project

This follows the naming convention used by other projects in the application.